<template>
	<div class="footer-wrapper">
		<div class="copy-wrapper">
			<img
				class="logo"
				:src="logoUrl"
				:alt="$store.getters.imgAlt + 'footerLogo'"
			/>
			<div class="copy-right">
				<span>{{ copyrightYear }} {{ webSiteName }} 版权所有</span>
				<span class="split">|</span>
				<span>
					<a class="link" href="http://beian.miit.gov.cn/" target="_blank"
						>{{ icp }}
					</a>
					&nbsp;
				</span>
			</div>
		</div>
	</div>
</template>

<script>
import * as configApi from '@/api/configApi'

export default {
	name: 'MyFooter',
	data() {
		return {
			logoUrl: require('_a/images/common/logo_footer.png'),
			webSiteName: '网站名称 XXX',
			icp: '备案号 XXX'
		}
	},
	computed: {
		copyrightYear() {
			return new Date().getFullYear()
		}
	},
	created() {
		this.getConfigList()
	},
	methods: {
		/**
		 * 获取系统参数信息
		 */
		getConfigList() {
			let data = { groupName: 'home' }
			configApi.getConfig(data).then((res) => {
				if (res.success) {
					this.webSiteName = res.data.websiteName || this.webSiteName
					this.icp = res.data.icp || this.icp
				}
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';

.footer-wrapper {
  display: flex;
  height: 100px

  .copy-wrapper {
    width: 100%;
    color: $PrimaryText;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    .logo {
      width: 240px;
      display: block;
      @media screen and (max-width: 920px) {
        width: 160px;
      }
    }

    .split {
      margin: 0 8px;
    }

    .link {
      color: $PrimaryText;
      &:hover {
        text-decoration: none;
      }
    }
  }
}
</style>
